//颜色相关
let startColor = 'cadetblue'; //初始色彩
const colorsList = document.querySelector('#colors');
const colorsBox = document.getElementById('colorsBox');
const colorPicture = document.querySelector('.colorPicture');

//笔迹大小
let lineWidth = 28; //初始笔迹
const sizeList = document.querySelector('#sizes');
const sizePicture = document.querySelector('.sizePicture');

//导航栏相关
const NavBtn = document.querySelector('input');
const navbar = document.querySelector('.navbar');
const contentList = document.querySelector('.content');

//橡皮相关
let eraserSize = 30; //初始橡皮
const eraserList = document.querySelector('#erasers');
const eraserBox = document.querySelector('#eraserBox');
const eraserPicture = document.querySelector('.eraserPicture');

//形状相关
const formPicture = document.querySelector('.formPicture');

//导航栏的图片点击显示函数
function clickPicture(theBox, theShow) {
  if (theShow) {
    theBox.style.display = 'block';
  } else {
    theBox.style.display = 'none';
  }
}
// 显示笔迹大小，其余隐藏
let isShowSize = false;
sizePicture.addEventListener('click', function () {
  isShowSize = !isShowSize;
  clickPicture(sizeBox, isShowSize);
  clickPicture(colorsBox, false);
  clickPicture(eraserBox, false);
});

// 显示橡皮擦大小，其余隐藏
let isShowEraser = false;
eraserPicture.addEventListener('click', function () {
  isShowEraser = !isShowEraser;
  clickPicture(eraserBox, isShowEraser);
  clickPicture(colorsBox, false);
  clickPicture(sizeBox, false);
});
//显示色块，其余隐藏
let isShowColor = false;
colorPicture.addEventListener('click', function () {
  isShowColor = !isShowColor;
  clickPicture(colorsBox, isShowColor);
  clickPicture(eraserBox, false);
  clickPicture(sizeBox, false);
});

//橡皮擦画笔切换
let isUseEraser = false;
eraser.onclick = function () {
  isUseEraser = true;
  eraser.classList.add('.eraserPicActive');
  paint.classList.remove('active');
  document.body.style.cursor = `url('../img/eraser32.ico') 32 32, auto`;
};
paint.onclick = function () {
  isUseEraser = false;
  paint.classList.add('active');
  eraser.classList.remove('.eraserPicActive');
  eraserBox.style.display = 'none';
  document.body.style.cursor = `url('../img/pen32.ico') 32 32, auto`;
};

//橡皮选择
eraserList.addEventListener('click', function (e) {
  for (let i = 0; i < eraserList.children.length; i++) {
    const eraser = eraserList.children[i];
    if (eraser === e.target) {
      eraser.classList.add('eraserActive');
      eraserSize = i * 15 + 20;
    } else {
      eraser.classList.remove('eraserActive');
    }
  }
});

//颜色选择
colorsList.addEventListener('click', function (e) {
  for (let i = 0; i < colorsList.children.length; i++) {
    const color = colorsList.children[i];
    if (color === e.target) {
      color.classList.add('liActive');
      theColor = color.getAttribute('color');
      startColor = theColor;
    } else {
      color.classList.remove('liActive');
    }
  }
});

// 笔迹选择
sizeList.addEventListener('click', function (e) {
  for (let i = 0; i < sizeList.children.length; i++) {
    const size = sizeList.children[i];
    if (size === e.target) {
      size.classList.add('sizeActive');
      lineWidth = 10 * i + 8;
    } else {
      size.classList.remove('sizeActive');
    }
  }
});

// 显示导航栏
let isShowNav = false;
let NavList = [
  sizePicture,
  colorPicture,
  eraserPicture,
  formPicture,
  deepBtn,
  oldBtn,
  blurBtn,
  redo,
  undo,
];
NavBtn.addEventListener('click', function () {
  isShowNav = !isShowNav;
  if (isShowNav) {
    navbar.style.height = '500px';
    NavList.map((item) => {
      item.style.display = 'block';
      item.style.transition = 'all 0.5s';
    });
  } else {
    navbar.style.height = '30px';
    NavList.map((item) => {
      item.style.display = 'none';
    });
    clickPicture(colorsBox, false);
    clickPicture(eraserBox, false);
    clickPicture(sizeBox, false);
  }
});
